<template>
  <div v-if="counselorData.user_id" class="main-layout">
    <el-card class="box-card" shadow="never">
      <el-page-header title="返回" :icon="ArrowLeft" @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3">预约详情</span>
        </template>
      </el-page-header>
    
      <div class="reserve-detail">
        <!-- 咨询师信息区域 -->
        <div class="counselor-info">
          <el-avatar :size="80" :src="avatarUrl" />
          <div class="info-text">
            <h2 class="name">{{ counselorData.name }}</h2>
            <p class="title1">{{ `国家${counselorData.level}级` }}/{{ counselorData.tag || '暂无标签' }}</p>
          </div>
          <!-- 统计数据区域 -->
          <div class="stats-section">
            <div class="stat-item">
              <div class="stat-value location">{{ counselorData.address || '暂无地址' }}</div>
              <div class="stat-label">所在地</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ counselorData.workplace || '暂无工作单位' }}</div>
              <div class="stat-label">工作单位</div>
            </div>
          </div>

          <div class="action-buttons">
            <el-button type="primary" class="reserve-btn" @click="goReserve">
              预约
            </el-button>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="basic-info">
          <h2 class="section-title">
            <span class="title-indicator"></span>
            基本信息
          </h2>
          <div class="divider"></div>
          <div class="content-box">
            <div class="text-large content-line">
              <span class="title">咨询师：</span>
              <span class="content">{{ counselorData.name }}</span>
            </div>
            <div class="text-large content-line">
              <span class="title">联系电话：</span>
              <span class="content">{{ formatMobile(counselorData.mobile) }}</span>
            </div>
            <div class="text-large content-line" v-if="counselorData.email">
              <span class="title">邮箱：</span>
              <span class="content">{{ counselorData.email }}</span>
            </div>
            <div class="text-large content-line">
              <span class="title">工作地址：</span>
              <span class="content">{{ counselorData.address || '暂无地址' }}</span>
            </div>
          </div>
        </div>

        <!-- 资质信息 -->
        <div class="qualification-info">
          <h2 class="section-title">
            <span class="title-indicator"></span>
            资质信息
          </h2>
          <div class="divider"></div>
          <div class="content-box">
            <div class="text-large content-line">
              <span class="title">咨询师级别：</span>
              <span class="content">{{ `国家${counselorData.level}级` }}</span>
            </div>
            <div class="text-large content-line">
              <span class="title">专业方向：</span>
              <span class="content">{{ counselorData.tag || '暂无专业方向' }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
  <div v-else class="main-layout">
    <el-card class="box-card" shadow="never">
      <el-empty description="暂无数据" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import router from '@/router'
import type { UserCounselorData } from '@/api/counselor/types'
import CounselorApi from '@/api/counselor'
import SsoUserApi from '@/api/sso_user'
import { ElMessage } from 'element-plus'

// 使用 ref 替代 props 来管理状态
const counselorData = ref<UserCounselorData>({
  user_id: '',
  name: '',
  level: '',
  workplace: '',
  address: '',
  mobile: '',
  email: '',
  tag: '',
  gender: 1,
  is_recommend: 0,
  is_delete: 0,
})

// 添加头像URL的响应式引用
const avatarUrl = ref('/default-avatar.jpg')

// 获取用户头像
const getUserAvatar = async (userId: string) => {
  try {
    const response = await SsoUserApi.getUser(userId)
    if (response.data)
    {
      if(Array.isArray(response.data)){
        avatarUrl.value = response.data[0].headpic_url
      }
    }
  } catch (error) {
    console.error('获取用户头像失败:', error)
    // 保持默认头像
  }
}

// 获取咨询师详情
const getCounselorDetail = async (userId: string) => {
  try {
    const response = await CounselorApi.getUserCounselor(userId)
    if (response.data && Array.isArray(response.data)) {
      counselorData.value = response.data[0]
      // 获取到咨询师信息后，获取头像
      await getUserAvatar(userId)
    } else {
      ElMessage.error('未找到咨询师信息')
    }
  } catch (error) {
    ElMessage.error('获取咨询师详情失败')
    console.error('获取咨询师详情失败:', error)
  }
}

// 组件挂载时获取详情
onMounted(() => {
  const userId = router.currentRoute.value.query.user_id as string
  if (userId) {
    getCounselorDetail(userId)
  } else {
    ElMessage.error('未找到咨询师ID')
    router.push('/reservePage')
  }
})

// 格式化手机号
const formatMobile = (mobile: string) => {
  return mobile ? mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '';
}

// 返回上一页
const goBack = () => {
  const fromWhere = router.currentRoute.value.query.fromWhere as string
  if (fromWhere === 'reservePage') {
    router.go(-1)
  } else {
    router.push('/reservePage')
  }
}

// 跳转到预约页面
const goReserve = () => {
  if (counselorData.value.user_id) {
    // 使用 localStorage 临时存储咨询师信息
    localStorage.setItem('counselorInfo', JSON.stringify(counselorData.value))
    router.push({
      name: 'timechoose',
      params: { id: counselorData.value.user_id }
    })
  }
}
</script>

<style scoped>
.main-layout {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.reserve-detail {
  margin: 20px;
}

.counselor-info {
  margin-left: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.info-text {
  margin-left: 16px;
}

.name {
  font-size: 24px;
  margin: 0 0 8px 0;
}

.title1 {
  color: #666;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 40px;
  margin-left: 50px;
}

.stat-item {
  text-align: left;
  margin-left: 40px;
}

.stat-value {
  font-size: 18px;
  color: #409EFF;
  margin-bottom: 4px;
}

.action-buttons {
  margin-left: auto;
  margin-right: 150px;
  display: flex;
  gap: 20px;
}

.reserve-btn,
.message-btn {
  width: 120px;
  height: 40px;
}

.reserve-btn {
  background-color: #409EFF;
  color: #ffffff;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin: 24px 0;
  margin-left: 100px;
}

.title-indicator {
  width: 4px;
  height: 18px;
  background-color: #409EFF;
  margin-right: 8px;
  border-radius: 2px;
}

.divider {
  height: 2px;
  background-color: #409EFF;
  margin: 24px 100px;
}

.content-box {
  margin: 20px 150px;
}

.content-line {
  margin: 16px 0;
  display: flex;
  align-items: center;
}

.title {
  color: #5c5b5b;
  font-size: 16px;
  width: 100px;
  text-align: right;
  margin-right: 20px;
  font-weight: 600;
}

.content {
  color: #303133;
  font-size: 16px;
  flex: 1;
  text-align: left;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .counselor-info {
    flex-direction: column;
    margin-left: 0;
    text-align: center;
  }

  .info-text {
    margin: 16px 0;
  }

  .stats-section {
    margin: 16px 0;
    justify-content: center;
  }

  .action-buttons {
    margin: 16px auto;
  }

  .section-title,
  .divider {
    margin-left: 20px;
    margin-right: 20px;
  }

  .content-box {
    margin: 20px;
  }

  .content-line {
    flex-direction: column;
    align-items: flex-start;
  }

  .title {
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
  }

  .content {
    width: 100%;
  }
}
</style>